<template>
  <div>
    <ShopTitle :title="shopcartTitle" :activeIndex="shopcartIndex"></ShopTitle>
    <ul>
      <!-- 购物车标题 -->
      <li class="title">
        <div class="checkbox">
          <el-checkbox v-model="isAllCheck">全选</el-checkbox>
        </div>
        <div class="book_name texc">书名</div>
        <div class="book_seller texc">卖家</div>
        <div class="book_yuanjia texc">原价</div>
        <div class="book_inventory texc">库存量</div>
        <div class="book_xianjia texc">售价</div>
        <div class="book_num texc">购买数量</div>
        <div class="book_price texc">小计</div>
        <div class="book_operation texc">操作</div>
      </li>
      <!-- 购物车列表 -->
      <li class="content" v-for="(item, index) in getShoppingCart" :key="index">
        <div class="checkbox">
          <el-checkbox
            v-model="item.ischeck"
            @change="checkChange($event, index, item.shopcart_book_id)"
          ></el-checkbox>
        </div>
        <div class="book_name">
          <img :src="baseURL + item.book_cover" alt="" />
          <span>{{ item.book_name }}</span>
        </div>
        <div class="book_seller texc">
          <span>{{ item.book_seller }}</span>
        </div>
        <div class="book_yuanjia texc">
          <span>￥{{ item.book_price_yuanjia }}</span>
        </div>
        <div class="book_inventory texc">
          <span>{{ item.book_num }}</span>
        </div>
        <div class="book_xianjia texc">
          <span>￥{{ item.book_price_xianjia }}</span>
        </div>
        <div class="book_num texc">
          <el-input-number
            :value="item.num"
            @change="handleChange($event, index, item.shopcart_book_id)"
            :min="1"
            :max="item.book_num"
            label="数量"
            size="small"
          ></el-input-number>
        </div>
        <div class="book_price texc">
          <span>￥{{ item.book_price_xianjia * item.num }}</span>
        </div>
        <div class="book_operation texc">
          <el-button size="mini" @click="deleteShopCart(item.shopcart_book_id)"
            >删除</el-button
          >
        </div>
      </li>
    </ul>
    <div class="cala">
      <div class="cala_left">
        共<span>{{ getNum }}</span
        >件商品,已选择<span>{{ getCheckNum }}</span
        >件
      </div>
      <div class="cala_right">
        总计：<span>￥{{ getTotalPrice }}</span>
        <el-button size="mini" @click="handleAccount">去结算 ></el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import ShopTitle from './ShopTitle.vue'
export default {
  components: {
    ShopTitle
  },
  data() {
    return {
      shopcartTitle: '我的购物车',
      shopcartIndex: 1,
      num: 1,
      // 购物车商品图片地址
      baseURL: 'http://127.0.0.1:3000/'
    }
  },
  methods: {
    ...mapActions('shopcart', [
      'updateShoppingCart',
      'deleteShoppingCart',
      'checkAll'
    ]),
    // 复选框选择
    async checkChange(val, key, bookId) {
      // 更新vuex中购物车商品是否勾选的状态
      this.updateShoppingCart({ key: key, prop: 'check', val: val })
      val = val == true ? '1' : '0'
      const { data: res } = await this.$http.put('/shopcart/checkShopCart', {
        ischeck: val,
        username: this.getUser,
        book_id: bookId
      })
      if (res.code !== 200) this.$message.error('更新选中失败')
    },
    // 数量改变
    async handleChange(currentValue, key, bookId) {
      const { data: res } = await this.$http.put('/shopcart/updateShopCart', {
        num: currentValue,
        username: this.getUser,
        book_id: bookId
      })
      if (res.code !== 200) return this.$message.error('修改数量失败')
      this.updateShoppingCart({
        key: key,
        val: currentValue,
        prop: 'num'
      })
    },
    // 结算按钮
    handleAccount() {
      console.log(this.getShoppingCart)
      // 获取购物车选择书籍
      let selectBookArr = []
      this.getShoppingCart.forEach(item => {
        if (item.ischeck === true) selectBookArr.push(item)
      })
      if (selectBookArr.length !== 0) {
        console.log(selectBookArr)
        this.$router.push({
          path: '/fill',
          query: { dataName: selectBookArr }
        })
      } else {
        this.$message.warning('请选择图书')
      }
    },
    // 删除按钮
    async deleteShopCart(bookId) {
      const { data: res } = await this.$http.post('/shopcart/deleteShopCart', {
        book_id: bookId,
        username: this.getUser
      })
      if (res.code !== 200) return this.$message.error('删除失败')
      this.deleteShoppingCart(bookId)
      console.log(this.getShoppingCart)
      this.$message.success('删除成功')
    }
  },
  computed: {
    ...mapGetters('shopcart', [
      'getShoppingCart',
      'getCheckNum',
      'getTotalPrice',
      'getNum',
      'getIsAllCheck'
    ]),
    ...mapGetters('user', ['getUser']),
    // 设置全选
    isAllCheck: {
      get() {
        return this.getIsAllCheck
      },
      set(val) {
        this.checkAll(val)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// 标题
.title {
  display: flex;
  height: 30px;
  line-height: 30px;
  background-color: #ccc;
  font-size: 14px;
  color: rgb(107, 107, 107);
}
// 内容
.content {
  display: flex;
  height: 65px;
  line-height: 65px;
  border-bottom: 1px solid #ccc;
  background-color: #fff;
}
// 总计结算
.cala {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  background-color: #ebebeb;
  font-size: 12px;
  .cala_left {
    font-size: 14px;
    color: #6b6b6b;
    margin-left: 20px;
    span {
      color: #ff0000;
    }
  }
  .cala_right {
    font-size: 14px;
    color: #6b6b6b;
    span {
      color: #ff0000;
    }
    .el-button {
      margin: 0px 15px 0px 40px;
      background-color: rgb(210, 172, 107);
      color: #fff;
      font-size: 16px;
      font-weight: bold;
    }
  }
}

.texc {
  text-align: center;
}
.checkbox {
  width: 75px;
  margin-left: 14px;
}
.book_name {
  width: 320px;
  img {
    width: 40px;
    height: 50px;
    border: 1px solid rgb(222, 222, 222);
    padding: 2px;
    vertical-align: middle;
    margin-right: 10px;
  }
  span {
    font-size: 12px;
    color: rgb(210, 172, 107);
  }
}
.book_seller {
  width: 118px;
  span {
    font-size: 12px;
  }
}
.book_yuanjia {
  width: 74px;
  span {
    font-size: 12px;
  }
}
.book_inventory {
  width: 74px;
  span {
    font-size: 12px;
  }
}
.book_xianjia {
  width: 74px;
  span {
    font-size: 12px;
  }
}
.book_num {
  width: 124px !important;
}
.book_price {
  width: 104px;
  span {
    font-size: 12px;
  }
}
.book_operation {
  width: 74px;
  .el-button {
    border: 0px;
    color: rgb(210, 172, 107);
  }
}
</style>
